<template>
  <div class="dayin">
    <div class="contentDiv">
      <div class="tableList">
        <div class="table_l">
          <el-collapse v-model="activeNames" @change="handleChange">
            <el-collapse-item name="1">
              <template #title>
                <div class="header_title">
                  <div class="titleSpan">普通文件</div>
                  <div class="titleSpan">大小</div>
                </div>
              </template>
              <div class="flex_b">
                <div class="flex_c">
                  <img src="../../assets/images/file.png" alt="">
                  <span>员工个人信息</span>
                </div>
                <div class="daxiao">50k</div>
              </div>
              <div class="flex_b">
                <div class="flex_c">
                  <img src="../../assets/images/file.png" alt="">
                  <span>员工个人信息</span>
                </div>
                <div class="daxiao">50k</div>
              </div>
              <div class="flex_b">
                <div class="flex_c">
                  <img src="../../assets/images/file.png" alt="">
                  <span>员工个人信息</span>
                </div>
                <div class="daxiao">50k</div>
              </div>

            </el-collapse-item>
            <el-collapse-item name="2">
              <template #title>
                <div class="header_title">
                  <div class="titleSpan">设备文件</div>
                  <div class="titleSpan"></div>
                </div>
              </template>
              <div class="flex_b">
                <div class="flex_c">
                  <img src="../../assets/images/file.png" alt="">
                  <span>设备文件1</span>
                </div>
                <div class="daxiao">50k</div>
              </div>
              <div class="flex_b">
                <div class="flex_c">
                  <img src="../../assets/images/file.png" alt="">
                  <span>设备文件2</span>
                </div>
                <div class="daxiao">50k</div>
              </div>
              <div class="flex_b">
                <div class="flex_c">
                  <img src="../../assets/images/file.png" alt="">
                  <span>设备文件3</span>
                </div>
                <div class="daxiao">50k</div>
              </div>

            </el-collapse-item>
            <el-collapse-item name="3">
              <template #title>
                <div class="header_title">
                  <div class="titleSpan">合同文件</div>
                  <div class="titleSpan"></div>
                </div>
              </template>
              <div class="flex_b">
                <div class="flex_c">
                  <img src="../../assets/images/file.png" alt="">
                  <span>合同1</span>
                </div>
                <div class="daxiao">50k</div>
              </div>
              <div class="flex_b">
                <div class="flex_c">
                  <img src="../../assets/images/file.png" alt="">
                  <span>合同2</span>
                </div>
                <div class="daxiao">50k</div>
              </div>
              <div class="flex_b">
                <div class="flex_c">
                  <img src="../../assets/images/file.png" alt="">
                  <span>合同3</span>
                </div>
                <div class="daxiao">50k</div>
              </div>

            </el-collapse-item>

          </el-collapse>
        </div>
        <div class="table_r">
          <div class="flex_cc"><img src="../../assets/images/file.png" alt=""> <span class="title">员工个人信息</span></div>
          <div class="padding10"><span class="title">50k</span></div>
          <div class="flex_bb">
            <span>访问记录</span>
            <el-tag size="large"  type="primary">查看访问记录</el-tag>
          </div>
          <div class="flex_bb">
            <span>修改记录</span>
            <el-tag size="large"  type="success">查看修改记录</el-tag>
          </div>
          <div class="history">
            <div class="flex_bb">
              <div class="flex_cc">
                <img style="width:2rem;height: 2rem;" src="../../assets/images/touxiang.png" alt="">
                <span class="ml-5">姓名</span>
              </div>
              <span>5月20号更新</span>
            </div>
            <div class="flex_bb">
              <div class="flex_cc">
                <img style="width:2rem;height: 2rem;" src="../../assets/images/touxiang.png" alt="">
                <span class="ml-5">姓名</span>
              </div>
              <span>5月20号更新</span>
            </div>
            <div class="flex_bb">
              <div class="flex_cc">
                <img style="width:2rem;height: 2rem;" src="../../assets/images/touxiang.png" alt="">
                <span class="ml-5">姓名</span>
              </div>
              <span>5月20号更新</span>
            </div>
          </div>
          <div style="width: 40%;display: flex; justify-content: space-evenly;margin: 0 auto;">
            <el-tag type="primary" size="large">导出</el-tag>
            <el-tag type="primary" effect="dark" size="large">打印</el-tag>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>
<script lang="ts" setup>
  import { ref } from 'vue'
  const activeNames = ref(['1'])
  const handleChange = (val: string[]) => {
}
</script>



<style scoped lang="scss">
.dayin{

  width: 100%;
  height: 100%;
  :deep(.el-form-item__label){
    color: white;
  }
   :deep(.el-tabs__item) {
    font-size: 1.2rem!important;
    color: white;
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
  }
   :deep(.el-tabs__item.is-active) {
    color: #1890ff;
  }
  .el-table, :deep(.el-table tr){
    background-color: transparent!important;
  }
  .el-table thead {
    background-color: transparent;
  }
   :deep(.el-table .el-table__header-wrapper th), :deep(.el-table .el-table__fixed-header-wrapper th) {
    color: white;
  }
   :deep(.el-table th.el-table__cell.is-leaf),  :deep(.el-table td.el-table__cell){
    border-bottom: none;
    color: white;
  }
   :deep(.el-table tr:hover) {
    background-color: transparent !important;
  }
   :deep(.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell) {
    background-color: transparent !important;
  }
   :deep(.el-table::before) {
    height: 0px;
  }
  .contentDiv{
    position: absolute;
    width: 80%;
    height: 84%;
    left: 18%;
    top: 7%;
    .tableList{
      padding: 1rem 0rem;
      display: flex;
      height: 100%;
      .table_l{
        width: 70%;
        height: 100%;
        border-right:1px solid #1c84c6;
        padding: 0 1rem 0 0;
        .header_title{
          width: 100%;
          display: flex;
          align-items: center;
          .titleSpan{
            font-weight: bold;
            font-size: 1rem;
            display: inline-block;
          }
          .titleSpan:nth-of-type(1){
            width: 70%;
            text-align: left;
          }
          .titleSpan:nth-of-type(2){
            width: 30%;
            text-align: left;
          }
        }


        .flex_b{
          display: flex;
          justify-content: space-between;
          margin-bottom: 1rem;
          width: 100%;
          .daxiao{
            color: white;
            font-size: 0.8rem;
            font-weight: bold;
            width: 30%;
          }
          .flex_c{
            width: 70%;
            display: flex;
            align-items: center;
            color: white;
            font-weight: bold;
            font-size: 0.9rem;
            span{
              margin-left: 1rem;
            }
          }
        }
        :deep(.el-collapse) {
          border: 0px;
        }
        :deep(.el-collapse-item__header){
          background-color: transparent;
          color: white;
          position: relative;
          border-bottom: 0px;
        }
        :deep(.el-collapse-item__wrap){
          background-color: transparent;
          color: white;
          border: 0px;
        }
        :deep(.el-collapse-item__content) {
          padding-bottom: 5px;
        }
        :deep(.el-collapse-item__arrow) {
          font-weight: bold;
          margin: 15px 8px 15px auto;
          position: absolute;
          left: 5rem;
        }
      }
      .table_r{
        width: 30%;
        padding: 0 0rem 0 1rem;
        .flex_cc{
          display: flex;
          align-items: center;
          margin-bottom: 0.5rem;
          .title{
            color: white;
            font-weight: 500;
            font-size: 1.5rem;
            margin-left: 0.5rem;
          }
        }
      }
    }
  }
  .padding10{
    padding: 0.5rem;
    color: white;
  }
  .flex_bb{
    display: flex;
    justify-content: space-between;
    color: white;
    padding: 0.5rem;
  }

  .h100{
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    width: 100%;
    height: 100%;
    .tanDiv{
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      width: 100%;
      height: 100%;
      background-color: #081F31;
      z-index: 222;
      opacity: 0.8;
    }
    .diaStyle{
      /* 修改弹框样式 */
      position: relative;
      width: 71rem;
      height: 43rem;
      background-image: url("../../assets/images/total.png");
      background-size: contain; /* 背景图片铺满并保持比例不变 */
      background-repeat: no-repeat; /* 不重复平铺 */
      background-position: center; /* 图片居中对齐 */
      padding: 2rem 3rem;
      z-index: 333;
       :deep(.el-tabs__item) {font-size: 1.2rem!important;color: white; font-family: PingFangSC, PingFang SC;font-weight: 500;}
       :deep(.el-tabs__item.is-active) {color: #1890ff;}
      .xx{
        width: 2rem;
        height: 2rem;
        position: absolute;
        top: -1rem;
        right: -1rem;
        cursor: pointer;
        img{
          width: 100%;
          height: 100%;
        }
      }
      .export{ position: absolute; right: 3rem;top: 2.2rem;cursor: pointer;z-index: 9999;}
      .warningContent{
        padding: 2rem 3rem;
        color: white;
        div:nth-of-type(1) span{
          font-family: HYYaKuHei, HYYaKuHei;
          font-weight: normal;
          font-size: 1.5rem;
          color: #FFFFFF;
        }
        div:nth-of-type(2){
          .baseSession{
            margin-top: 1.5rem;
            span{
              font-family: PingFangSC, PingFang SC;
              font-weight: 500;
              font-size: 1.2rem;
              line-height: 2.2rem;
              color: #FFFFFF;
            }
          }
          .mt10{
             :deep(.el-table thead) {
              background-color: #01B0FF!important;
            }
          }
        }


      }

      .warningContent1{
        padding: 2rem 3rem;
        color: white;
        height: 100%;
        .wt{
          font-family: HYYaKuHei, HYYaKuHei;
          font-weight: normal;
          font-size: 1.5rem;
          color: #FFFFFF;
          display: flex;
          align-items: center;
        }
        .wb{
          height: 80%;
          .baseSession{
            height: 100%;
            margin-top: 1.5rem;
            display: flex;
            .leftSession{
                flex: 1;
                padding: 3rem;
              p{
                line-height: 2rem;
              }
            }
            .rightSession{
                flex: 1;
                #kaoecharts{
                  width: 30rem;
                  height: 30rem;
                }
            }
          }
        }


      }
    }
  }

  .h101{
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    width: 100%;
    height: 100%;
    .tanDiv{
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      width: 100%;
      height: 100%;
      background-color: #081F31;
      z-index: 222;
      opacity: 0.8;
    }
    .diaStyle{
      /* 修改弹框样式 */
      position: relative;
      width: 71rem;
      height: 43rem;
      background-image: url("../../assets/images/total.png");
      background-size: contain; /* 背景图片铺满并保持比例不变 */
      background-repeat: no-repeat; /* 不重复平铺 */
      background-position: center; /* 图片居中对齐 */
      padding: 2rem 3rem;
      z-index: 333;
      .xx{
        width: 2rem;
        height: 2rem;
        position: absolute;
        top: -1rem;
        right: -1rem;
        cursor: pointer;
        img{
          width: 100%;
          height: 100%;
        }
      }
      .warningContent{
        width: 100%;
        height: 100%;
        padding: 2rem 3rem;
        color: white;
        .wt {
          width: 100%;
          height: 5%;
          span{
            font-family: HYYaKuHei, HYYaKuHei;
            font-weight: normal;
            font-size: 1.5rem;
            color: #FFFFFF;
          }
        }

        .wb{
          width: 100%;
          height: 95%;
          .baseSession{
            width: 100%;
            height: 100%;
            margin-top: 1.5rem;
            .echart{
              width: 65rem;
              height: 32rem;
            }
          }
        }


      }
    }
  }
}


</style>

